<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:rich="http://richfaces.org/rich">
	
		<f:view contentType="text/html">	
		<h:head>
          	<f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Primerios Passos no JSF</title>
            </f:facet>

            <link type="text/css" rel="stylesheet" href="css/default.css" />
            <link type="text/css" rel="stylesheet" href="css/syntaxhighlighter.css" />

            <style type="text/css">
                .ui-layout-north {
                    z-index:20 !important;
                    overflow:visible !important;;
                }

                .ui-layout-north .ui-layout-unit-content {
                    overflow:visible !important;
                }
            </style>
		</h:head>

<h:body>

<h:form id="form">
		
		<p:dataTable id="dataTable" var="auto" value="#{automovelBean.autos}" sortMode="multiple"
		 rowKey="#{auto.idautomovel}" widgetVar="autoTable">  
        
        <f:facet name="header">  
        Tabela Automoveis
        <li></li>
            <p:outputPanel>  
                <h:outputText value="Buscar " />  
                <p:inputText id="globalFilter" onkeyup="autoTable.filter()" style="width:150px" />  
            </p:outputPanel>  
        </f:facet>  
  
        <p:column sortBy="#{auto.idautomovel}" filterBy="#{auto.idautomovel}"  headerText="ID">  
        	<h:outputText value="#{auto.idautomovel}" /> 
        </p:column>  
  
        <p:column sortBy="#{auto.modelo.descricao}" filterBy="#{auto.modelo.descricao}" headerText="Modelo">
        	<h:outputText value="#{auto.modelo.descricao}" />
	        
        </p:column>  
  
        <p:column sortBy="#{auto.modelo.marca.descricao}" filterBy="#{auto.modelo.marca.descricao}" headerText="Marca">  
            <h:outputText value="#{auto.modelo.marca.descricao}" />  
        </p:column>  
  
        <p:column sortBy="#{auto.anoFabricacao}" filterBy="#{auto.anoFabricacao}" headerText="Fabricação">  
            <h:outputText value="#{auto.anoFabricacao}" />  
        </p:column>
          
         <p:column style="width:4%">  
                <p:commandButton id="selectButton" update=":form:detalhes" oncomplete="detalhesDialog.show()" icon="ui-icon-search" title="View">  
                <f:setPropertyActionListener value="#{auto}" target="#{automovelBean.auto}" />  
            </p:commandButton>  
        </p:column>      
    </p:dataTable> 
    
    <p:dialog header="Detalhes do Automóvel" widgetVar="detalhesDialog" resizable="false" id="detalhesDlg"  
                showEffect="fade" hideEffect="explode" modal="true">  
  
        <h:panelGrid id="detalhes" columns="2" cellpadding="4" style="margin:0 auto;">  
  
            <f:facet name="header">  
                <h:outputText value=""/>  
            </f:facet>  
  
            <h:outputText value="Carro:" />  
            <h:outputText value="#{automovelBean.auto.modelo.descricao}" style="font-weight:bold"/>  
  
            <h:outputText value="Ano / Modelo" />  
            <h:outputText value="#{automovelBean.auto.anoFabricacao}/#{automovelBean.auto.anoModelo}" style="font-weight:bold"/>  
  
  
            <h:outputText value="Marca:" />  
            <h:outputText value="#{automovelBean.auto.modelo.marca.descricao}" style="font-weight:bold"/>
            
            <h:outputText value="Potência:" />  
            <h:outputText value="#{automovelBean.auto.modelo.potencia}" style="font-weight:bold"/>  
  
            <h:outputText value="Kilometragem:" />  
            <h:outputText value="#{automovelBean.auto.kilometragem} Km" style="font-weight:bold"/>
            
            <h:outputText value="Observações:" />  
            <h:outputText value="#{automovelBean.auto.observacoes}" style="font-weight:bold"/>  
  
        </h:panelGrid>  
  
    </p:dialog>
    
</h:form >

</h:body>
</f:view>	
</html>